<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .bar{
      width:100px;
      height: 100px;
      position: fixed;
      bottom:300px;
      right:20px;
      overflow:hidden
    }
    .icon,.bg{
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      height:100%
    }
    .icon{background-color: blue;}
    .bg{
      background-color: rgba(255,255,255,.5);
      /* 固定的原点  bg围绕这个点进行的旋转 */
      transform-origin: left bottom;
      /*默认让bg隐藏在icon模块的下面*/
      transform: rotate(90deg);
      transition: all  .3s ease;
    }
    .bar:hover .bg{
      /* 结合transition过渡 */
      transform: rotate(0deg);
    }
  </style>
</head>
<body>
<!-- 百度 -->
<div class="bar">
  <div class="icon"></div>
  <div class="bg"></div>
</div>
</body>
</html>
